<template>
	<div class="containers">
		<div class="container">
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-plus" class="handle-add mr10" @click="addregion"
					size="mini">添加</el-button>
			</div>

			<el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header"
				@selection-change="handleSelectionChange" v-loading="loading" border size="mini">
				<el-table-column type="index" width="55" label="序号" align="center"></el-table-column>

				<el-table-column prop="type_name" label="规格名称" width="150"></el-table-column>
				<el-table-column label="属性值">
					<template slot-scope="scope" style="display: flex;">
						<div class="tagboxs">
							<div class="tagbox" v-for=" item in scope.row.type_attr" :key="item.ID">
								<el-tag size="mini" style="margin-right: 10px;" :type="'success'" @click="handleEdit(item)">{{
									item.val }}</el-tag>
								<div class="trdelete" @click="handleDelete(item)">X</div>
							</div>
						</div>


					</template>
				</el-table-column>
				<!-- <el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button type="text" icon="el-icon-delete" class="red"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column> -->
			</el-table>
		</div>

		<!-- 添加弹出框 -->
		<el-dialog :title="type ? '编辑' : '添加'" :visible.sync="editVisible" width="30%">
			<el-form ref="form" :model="form" label-width="70px">
				<el-form-item label="属性名称"><el-input v-model="form.property_attr"></el-input></el-form-item>
				<el-form-item label="属性值"><el-input v-model="form.property_vals"
						placeholder="多个值','隔开"></el-input></el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="saveEdit">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 编辑弹出框 -->
		<el-dialog :title="type ? '编辑' : '添加'" :visible.sync="editVisibles" width="30%">
			<el-form ref="putdata" :model="putdata" label-width="70px">
				<el-form-item label="属性名称"><el-input v-model="putdata.attr"></el-input></el-form-item>
				<el-form-item label="属性值"><el-input v-model="putdata.val"
						placeholder="多个值','隔开"></el-input></el-form-item>
				<el-form-item label="排序"><el-input v-model="putdata.sort"></el-input></el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="saveEdit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'basetable',
	data() {
		return {
			form: {
				property_attr: '',
				property_vals: ''
			},
			query: {
				pageIndex: 1,
				pageSize: 20
			},
			code: 0,
			upload: '',
			tableData: [],
			multipleSelection: [],
			editVisible: false,
			editVisibles: false,
			pageTotal: 0,
			imageUrl: '',
			type: 0,
			putdata: {},
			loading: false
		};
	},
	created() {
		this.getData()
	},
	methods: {
		//获取数据
		getData() {
			this.loading = true
			this.request('admin/add_attribute/', 'get', { page: this.query.pageIndex, size: this.query.pageSize }).then(res => {
				console.log(res.data)
				this.loading = false
				let arr = []
				res.data.forEach(item => {
					item.type_attr.forEach(items => {
						arr.push({
							attr: item.type_name,
							val: items.val,
							ID: items.ID,
							sort: items.sort
						})
					})

				})
				this.tableData = res.data
			})
		},
		// 编辑
		handleEdit(e) {
			console.log(e)
			this.editVisibles = true;
			this.putdata = e;
			this.imageUrl = e.img;
			this.type = 1
		},
		cancel() {
			this.editVisible = false;
			this.editVisibles = false;
			this.form = {
				property_attr: '',
				property_vals: ''
			};
			this.getData();
		},
		// 修改排序
		operations(e, code) {
			console.log(e)
			e.sort = Number(e.sort)
			console.log(e)
			this.request('admin/add_attribute/', 'put', e).then(res => {
				if (res.errno == 0) {
					this.$message.success(res.errmsg);
					this.editVisible = false;
					this.getData();
				} else {
					this.$message.error(res.errmsg);
				}
			});
		},
		// 删除操作
		handleDelete(row) {
			// 二次确认删除
			this.$confirm('确定要删除吗？', '提示', {
				type: 'warning'
			})
				.then(() => {
					this.request('admin/add_attribute/', 'delete', { ID: row.ID }).then(res => {
						if (res.errno == 0) {
							this.$message.success(res.errmsg);
							// this.tableData.splice(index, 1)
							this.getData()
						} else {
							this.$message.error(res.errmsg);
						}
					});
				})
		},
		// 多选操作
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		// 添加
		addregion() {
			this.form = {
				property_attr: '',
				property_vals: ''
			};
			this.type = 0
			this.imageUrl = '';
			this.editVisible = true;
		},

		// 添加/修改
		saveEdit() {
			if (this.type) {
				this.putdata.sort = Number(this.putdata.sort)
			} else {
				this.form.property_vals = this.form.property_vals.split(',')
				if (!this.form.property_attr) return this.$message.error('请输入属性名称');
				if (!this.form.property_vals.length) return this.$message.error('请输入属性值');
			}

			// let data
			// if(this.type){
			// 	data ={
			// 		attr:this.form.property_attr,
			// 		val:this.form.property_vals
			// 	}
			// }
			this.request('admin/add_attribute/', this.type ? 'put' : 'post', this.type ? this.putdata : this.form).then(res => {
				if (res.errno == 0) {
					this.$message.success(res.errmsg);
					this.form = {
						property_attr: '',
						property_vals: ''
					};
					this.putdata = {}
					this.getData();
					this.editVisible = false;
					this.editVisibles = false;
				} else {
					this.$message.error(res.errmsg);
				}
			});

		},
		// 分页导航
		handlePageChange(val) {
			this.$set(this.query, 'pageIndex', val);
			this.getData();
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	padding: 20px;
}

.el-upload--text {
	width: 200px !important;
}

.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;

	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	/* width: 100px; */
	height: 100px;
	line-height: 100px;
	text-align: center;
}

.avatar {
	width: 100%;
	height: 178px;
	display: block;
}

.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
	display: inline-block;
}

.table {
	width: 100%;
	font-size: 14px;
}

.red {
	color: #ff0000;
}

.mr10 {
	margin-right: 10px;
}

.table-td-thumb {
	display: block;
	margin: auto;
	width: 60px;
	height: 60px;

	.el-image img {
		object-fit: cover;
	}
}

/* 设置分页按钮样式 */
.pagination {
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
}

.tagboxs {
	display: flex;
	flex-wrap: wrap;

	.tagbox {
		position: relative;
		cursor: pointer;
		padding-top: 10px;

		.trdelete {
			display: none;
			color: #ff0000;
			position: absolute;
			right: 0;
			top: 0;
		}
	}

	.tagbox:hover {
		.trdelete {
			display: block;
		}
	}

}
/* 使用 /deep/ 或 >>> 来穿透 scoped 样式 */
::v-deep .el-table th.el-table__cell {
  background-color: #f2f2f2;
  /* 设置表头颜色 */
  color: #333;
  /* 设置表头文字颜色 */
}
</style>
